import React, { memo, useState, useEffect } from 'react'

import type { ReactNode } from 'react'
import { CArtistListWrapper } from './style'
import { useAppSelector, useAppDispatch, shallowEqualApp } from '@/store'
import { fetchArtistListAction } from '@/views/discover/c-page/artist/store/artist'
import classNames from 'classnames'
import { singerAlphas } from '@/utils/HandlerData'

interface IProps {
  children?: ReactNode
}

const CAtristList: React.FC<IProps> = () => {
  const [currentAlpha, setCurrentAlpha] = useState('-1')
  const { currentType, currentArea } = useAppSelector(
    (state) => ({
      currentType: state.artist.currentType,
      currentArea: state.artist.currentArea
    }),
    shallowEqualApp
  )
  const dispatch = useAppDispatch()
  useEffect(() => {
    setCurrentAlpha('-1')
  }, [currentType, currentArea])
  useEffect(() => {
    dispatch(
      fetchArtistListAction({
        area: currentArea,
        type: currentType.type,
        initial: currentAlpha
      })
    )
  }, [currentAlpha, currentType, currentArea, dispatch])

  return (
    <CArtistListWrapper $hasTop={currentArea !== -1}>
      {currentArea !== -1 &&
        singerAlphas.map((item, index) => {
          const isActive = currentAlpha === item
          if (item === '0') item = '其他'
          if (item === '-1') item = '热门'
          return (
            <div
              key={item}
              className={classNames('item', { active: isActive })}
            >
              <span
                onClick={() =>
                  setCurrentAlpha(
                    item === '其他' ? '0' : item === '热门' ? '-1' : item
                  )
                }
              >
                {item.toUpperCase()}
              </span>
            </div>
          )
        })}
    </CArtistListWrapper>
  )
}

export default memo(CAtristList)
